﻿@page
@{
    ViewData["Title"] = "Image Generation";
    string alwaysRefreshOnLoad = Program.ServerSettings.Backends.AlwaysRefreshOnLoad ? "true" : "false";
    string experimentalHide = Program.ServerSettings.ShowExperimentalFeatures ? "" : "secretexperimental";
}
@section Header {
    <link rel="stylesheet" href="/css/genpage.css?vary=@Utilities.VaryID" />
}

@if (!Program.ServerSettings.IsInstalled)
{
    <script>
        window.location.href = "/Install";
    </script>
    return;
}
<script>
    window.alwaysRefreshOnLoad = @alwaysRefreshOnLoad;
</script>

<ul class="nav nav-tabs" role="tablist" id="toptablist">
    <li class="nav-item" role="presentation">
        <a class="nav-link translate" data-bs-toggle="tab" href="#Simple" id="simpletabbutton" aria-selected="false" tabindex="-1" role="tab">Simple</a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link active translate" data-bs-toggle="tab" href="#Text2Image" id="text2imagetabbutton" aria-selected="true" role="tab">Generate</a>
    </li>
    @WebServer.T2ITabHeader
    <li class="nav-item" role="presentation">
        <a class="nav-link translate" data-bs-toggle="tab" href="#utilities_tab" id="utilitiestabbutton" aria-selected="false" tabindex="-1" role="tab">Utilities</a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link translate" data-bs-toggle="tab" href="#user_tab" id="usersettingstabbutton" aria-selected="false" tabindex="-1" role="tab">User</a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link translate" data-bs-toggle="tab" href="#server_tab" id="servertabbutton" aria-selected="false" tabindex="-1" role="tab">Server</a>
    </li>
</ul>
<div class="tab-content tab-hundred">
    <div class="tab-pane tab-pane-vw" id="Simple" role="tabpanel">
        <div class="simpletabbrowserwrapper browser_container" id="simpletabbrowserwrapper">
            <div class="browser-content-container simpletabmainview" id="simpletabmainview" style="display:none;">
                <div class="simple-wrapper-flex" id="simple_tab_top_area">
                    <div class="input-sidebar simpleinputsidebar" id="simple_input_sidebar">
                        <div class="simpleinput-top-section">
                            <div id="simple_inputs_area"></div>
                            <div id="simple_inputs_area_advanced" class="main_inputs_area_advanced" style="display:none;"></div>
                            <div id="simple_inputs_area_hidden" class="main_inputs_area_hidden"></div>
                            <div style="height: 2rem;"></div> <!-- Spacer -->
                        </div>
                        <div class="simple-gen-button-wrapper">
                            <button class="generate-button" id="simple_generate_button" onclick="simpleTab.generate()">Generate</button>
                        </div>
                    </div>
                    <div class="simple-outer-wall" style="margin-left:0;margin-right: 1rem;"></div>
                    <div id="simple_image_container" class="simpleimagearea">
                        <div class="image-preview-progress-wrapper simpletab-progress-wrapper" id="simpletab_progress_wrapper">
                            <div class="image-preview-progress-inner"><div class="image-preview-progress-overall"></div><div class="image-preview-progress-current"></div></div>
                        </div>
                        <img id="simple_image_container_img" src="imgs/model_placeholder.jpg" />
                        <div id="simple_loading_spinner" class="loading-spinner" style="display:none">
                            <div class="loadspin1"></div><div class="loadspin2"></div><div class="loadspin3"></div>
                        </div>
                    </div>
                    <div class="simple-outer-wall"></div>
                </div>
                <div class="simple-vertical-divider"></div>
                <div class="simple-bottom-area" id="simple_tab_bottom_area">
                    <div class="simple_current_image_batch" id="simple_current_image_batch_wrapper">
                        <div id="simple_current_image_batch" class="simple_current_image_batch_core"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane show active" style="line-height:0" id="Text2Image" role="tabpanel">
        <div class="t2i-top-bar-container" style="line-height:1.5">
            <div class="t2i-top-bar" id="t2i_top_bar">
                <div class="input-sidebar" id="input_sidebar">
                    <span class="interrupt_line"></span>
                    <div class="main_inputs_area_wrapper" id="main_inputs_area_wrapper">
                        <input type="text translate" class="main_inputs_filter auto-text" id="main_inputs_filter" oninput="hideUnsupportableParams()" placeholder="Filter parameters..." />
                        <div id="main_inputs_area"></div>
                        <div id="main_inputs_area_advanced" class="main_inputs_area_advanced" style="display:none;"></div>
                        <div id="main_inputs_area_hidden" class="main_inputs_area_hidden"></div>
                        <div style="height: 10rem;"></div> <!-- Spacer -->
                    </div>
                    <div class="advanced_input_checkbox">
                        <input type="checkbox" id="advanced_options_checkbox" onclick="toggle_advanced()"/>
                        <span onclick="toggle_advanced_checkbox_manual()"><span class="translate">Display Advanced Options?</span> <span id="advanced_hidden_count"></span></span>
                    </div>
                </div>
                <div class="t2i-top-split-bar splitter-bar" id="t2i-top-split-bar"><div class="t2i-split-quickbutton t2i-top-split-quickbutton" id="t2i-top-split-quickbutton">&#x21DA;</div></div>
                <div class="main-image-area" id="main_image_area">
                    <div class="image_editor_input" id="image_editor_input" style="display:none;"></div><div class="image_editor_sizebar splitter-bar t2i-top-imageeditor-bar" id="image_editor_sizebar" style="display:none;"></div><div class="current_image" id="current_image"><div id="welcome_message" class="welcome_message">@(new HtmlString(Program.VersionUpdateMessage ?? Program.ServerSettings.UI.OverrideWelcomeMessage))</div></div><div class="t2i-top-split-bar splitter-bar" id="t2i-top-2nd-split-bar"></div>
                    <div class="current_image_batch" id="current_image_batch_wrapper">
                        <div style="position: relative; width: 0; height: 0;">
                            <div class="batch-gear-button" onclick="doPopover('batchgear')">&#9881;</div>
                        </div>
                        <div class="sui-popover sui_popover_model" id="popover_batchgear">
                            <div class="batchgear-toggler" title="Clears the batch view.">
                                <button class="interrupt-button translate" id="clear_batch_button" onclick="clearBatch()">Clear Batch</button>
                            </div>
                            <div class="batchgear-toggler translate" title="If enabled, automatically clears out the image batch when generating a new one. If disabled, leaves history to grow until you refresh the page.">
                                <span class="form-check form-switch display-inline-block">
                                    <input type="checkbox" class="form-check-input" id="auto_clear_batch_checkbox" onchange="toggleAutoClearBatch()"> <label class="form-check-label" for="auto_clear_batch_checkbox translate">Auto Clear Batch</label>
                                </span>
                            </div>
                            <div class="batchgear-toggler translate" title="If enabled, automatically swaps to previews of new images the moment they're available, before the image itself is done generating.">
                                <span class="form-check form-switch display-inline-block">
                                    <input type="checkbox" class="form-check-input" id="auto_load_previews_checkbox" onchange="toggleAutoLoadPreviews()" checked=""> <label class="form-check-label translate" for="auto_load_previews_checkbox translate">Auto Swap To Previews</label>
                                </span>
                            </div>
                            <div class="batchgear-toggler translate" title="If enabled, automatically swaps to new images the moment they're done generating.">
                                <span class="form-check form-switch display-inline-block">
                                    <input type="checkbox" class="form-check-input" id="auto_load_images_checkbox" onchange="toggleAutoLoadImages()" checked="true"> <label class="form-check-label translate" for="auto_load_previews_checkbox translate">Auto Swap To Images</label>
                                </span>
                            </div>
                        </div>
                        <div id="current_image_batch" class="current_image_batch_core"></div>
                    </div>
                    <div class="alt_prompt_region" id="alt_prompt_region">
                        <div id="alt_prompt_extra_area" class="alt_prompt_extra_area">
                            <button class="interrupt-button image-clear-button translate" style="display: none;" id="alt_prompt_image_clear_button">Clear Images</button>
                            <div class="added-image-area alt-prompt-added-image-area" id="alt_prompt_image_area"></div>
                        </div>
                        <div class="alt_prompt_main_line">
                            <span class="alt-text-tokencount-wrapper">
                                <span class="auto-input-prompt-tokencount alt-text-tokencount">
                                    <span id="alt_text_tokencount" title="Prompt's Text-Encoder token count / chunk-size">0/75</span><span id="alt_negtext_tokencount" style="display:none" title="Negative prompt's Text-Encoder token count / chunk-size">Neg: 0/75</span>
                                </span>
                            </span>
                            <div class="alt_prompt_textboxes">
                                <textarea id="alt_prompt_textbox" class="alt_prompt_textbox translate" rows="1" placeholder="Type your prompt here... (or, drag an image in to use image prompting ReVision/IP-Adapter)" onpaste="revisionImagePaste(arguments[0])"></textarea>
                                <br>
                                <textarea id="alt_negativeprompt_textbox" class="alt_prompt_textbox translate" rows="1" placeholder="Optionally, type a negative prompt here..."></textarea>
                            </div>
                            <button class="alt-prompt-buttons alt-prompt-generate-button basic-button translate" id="alt_generate_button" oncontextmenu="doPopover('generate'); return false;" onclick="mainGenHandler.doGenerateButton(event)">Generate</button>
                            <button class="alt-prompt-buttons alt-prompt-center-button basic-button" id="alt_center_button" oncontextmenu="doPopover('generate_center'); return false;" onclick="doPopover('generate_center')">&#x2B9F;</button>
                            <button class="alt-prompt-buttons interrupt-button interrupt-button-none alt-interrupt" id="alt_interrupt_button" oncontextmenu="doPopover('interrupt'); return false;" onclick="mainGenHandler.doInterrupt()">&times;</button>
                        </div>
                    </div>
                    <div class="sui-popover sui_popover_model" id="popover_generate_center">
                        <div class="sui_popover_model_button translate" onclick="mainGenHandler.doGenerate()">Generate</div>
                        <div class="sui_popover_model_button translate" id="generate_forever_button" onclick="toggleGenerateForever()">Generate Forever</div>
                        <div class="sui_popover_model_button translate" id="generate_previews_button" onclick="toggleGeneratePreviews()">Generate Previews</div>
                        <div class="sui_popover_model_button translate" onclick="mainGenHandler.doInterrupt()">Interrupt Current Session</div>
                        <div class="sui_popover_model_button translate" onclick="mainGenHandler.doInterrupt(true)">Interrupt All Sessions</div>
                        <div class="sui_popover_model_button translate" onclick="mainGenHandler.doInterruptAndGen()" title="Alt+Click the Generate button to do this">Interrupt And Generate</div>
                        <div class="sui_popover_model_button translate" onclick="showPromptTokenizen('alt_prompt_textbox')">Show Prompt Tokenization</div>
                    </div>
                    <div class="sui-popover sui_popover_model" id="popover_generate">
                        <div class="sui_popover_model_button translate" onclick="mainGenHandler.doGenerate()">Generate</div>
                        <div class="sui_popover_model_button translate" id="generate_forever_button" onclick="toggleGenerateForever()">Generate Forever</div>
                        <div class="sui_popover_model_button translate" id="generate_previews_button" onclick="toggleGeneratePreviews()">Generate Previews</div>
                        <div class="sui_popover_model_button translate" onclick="mainGenHandler.doInterruptAndGen()" title="Alt+Click the Generate button to do this">Interrupt And Generate</div>
                    </div>
                    <div class="sui-popover sui_popover_model" id="popover_interrupt">
                        <div class="sui_popover_model_button translate" onclick="mainGenHandler.doInterrupt()">Interrupt Current Session</div>
                        <div class="sui_popover_model_button translate" onclick="mainGenHandler.doInterrupt(true)">Interrupt All Sessions</div>
                    </div>
                </div>
                <div class="model-block-menu-button t2i-area-quicktools translate" onclick="doPopover('quicktools')">Quick Tools</div>
                <div class="sui-popover sui_popover_model" id="popover_quicktools">
                    <div class="sui_popover_model_button translate" onclick="resetPageSizer()">Reset Page Layout</div>
                    <div class="sui_popover_model_button translate" onclick="refreshParameterValues(true)">Reload Parameter Values</div>
                    <div class="sui_popover_model_button translate" onclick="resetParamsToDefault()">Reset Params to Default</div>
                    <div class="sui_popover_model_button translate" onclick="openEmptyEditor()">Open Empty Image Editor</div>
                    <div class="sui_popover_model_button translate" onclick="mainGenHandler.doInterrupt()">Interrupt Current Session</div>
                    <div class="sui_popover_model_button translate" onclick="mainGenHandler.doInterrupt(true)">Interrupt All Sessions</div>
                    <div class="sui_popover_model_button translate" onclick="forceShowWelcomeMessage()">Reshow Welcome Message</div>
                    <div class="sui_popover_model_button translate" onclick="hideUnalteredParameters()">Hide Unaltered Parameters</div>
                </div>
                @WebUtil.ModalHeader("gen_previews_missing_preset_modal", "Missing Preview Preset")
                    <div class="modal-body">
                        To generate previews properly, please create a Preset and title it exactly "Preview"
                        <br>It is recommended that this preset be configured to use a fast-generation method such as LCM or Turbo.
                        <br>Your preset named exactly "Preview" will automatically be used when generating previews, and ignored when you click Generate to generate a full image.
                        <br><div id="gen_previews_autobutton"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary basic-button translate" onclick="toggleGeneratePreviews(true);$('#gen_previews_missing_preset_modal').modal('hide')">Start Anyway</button>
                        <button type="button" class="btn btn-secondary basic-button translate" onclick="$('#gen_previews_missing_preset_modal').modal('hide')">Cancel</button>
                    </div>
                @WebUtil.ModalFooter()
            </div>
        </div>
        <div class="t2i-mid-split-bar splitter-bar" id="t2i-mid-split-bar"><div class="t2i-split-quickbutton t2i-mid-split-quickbutton" id="t2i-mid-split-quickbutton">&#x290B;</div></div>
        <div class="t2i-bottom-bar" id="t2i_bottom_bar" style="line-height:1.5">
            <div class="bottom-info-bar-container">
                <span class="bottom-info-bar-component"><span><span class="other_info_span" id="other_info_span" style="min-height: 1rem"></span></span>
                <span class="bottom-info-bar-component"><b class="translate">Model</b>: <select class="auto-dropdown current_model_view" onchange="autoSelectWidth(this)" id="current_model"></select></span>
                <span class="bottom-info-bar-component" style="display:none;" id="current_presets_wrapper"><span><b class="translate">Current presets</b><span id="preset_info_slot"></span>: </span> <span id="current_preset_list_view"></span></span>
                <span class="bottom-info-bar-component" style="display:none;" id="current_loras_wrapper"><span class="translate"><b>Current LoRAs</b><span id="lora_info_slot"></span>: </span> <span id="current_lora_list_view"></span></span>
                <span class="bottom-info-bar-component"><span><span class="num_jobs_span" id="num_jobs_span" style="min-height: 1rem"></span></span>
            </div>
            <ul class="nav nav-tabs" role="tablist" id="bottombartabcollection">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active translate" id="imagehistorytabclickable" data-bs-toggle="tab" href="#Image-History-Tab" aria-selected="true" role="tab">Image History</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link translate" data-bs-toggle="tab" href="#Presets-Tab" aria-selected="false" tabindex="-1" role="tab">Presets</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link translate" data-bs-toggle="tab" href="#Models-Tab" id="modelstabheader" aria-selected="false" tabindex="-1" role="tab">Models</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link translate" data-bs-toggle="tab" href="#Vaes-Tab" aria-selected="false" tabindex="-1" role="tab">VAEs</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link translate" data-bs-toggle="tab" href="#Loras-Tab" aria-selected="false" tabindex="-1" role="tab">LoRAs</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link translate" data-bs-toggle="tab" href="#Embeddings-Tab" aria-selected="false" tabindex="-1" role="tab">Embeddings</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link translate" data-bs-toggle="tab" href="#ControlNets-Tab" aria-selected="false" tabindex="-1" role="tab">ControlNets</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link translate" data-bs-toggle="tab" href="#Wildcards-Tab" aria-selected="false" tabindex="-1" role="tab">Wildcards</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link translate" data-bs-toggle="tab" href="#Tools-Tab" aria-selected="false" tabindex="-1" role="tab">Tools</a>
                </li>
            </ul>
            <div class="tab-content" id="t2i_bottom_bar_content">
                <div class="tab-pane show active genpage-bottom-tab" id="Image-History-Tab" role="tabpanel">
                    <div class="browser_container" id="image_history"></div>
                </div>
                <div class="modal modal-fullscreen imageview_popup_modal_background" id="image_fullview_modal">
                    <div id="image_fullview_modal_content" style="width:fit-content;margin:auto;"></div>
                    <div style="position: fixed; top: 1rem; right: 10%; width: 0; height: 0">
                        <span class="text_button translate" onclick="imageFullView.close()">[Close]</button>
                    </div>
                </div>
                <div class="tab-pane genpage-bottom-tab" id="Presets-Tab" role="tabpanel">
                    @WebUtil.ModalHeader("export_presets_modal", "Export Presets")
                        <div class="modal-body">
                            <h5>Format:</h5>
                            <div class="btn-group" role="group">
                                <input type="radio" class="btn-check" name="btnradio" id="export_preset_format_json" autocomplete="off" checked="" onchange="exportPresetsButton()">
                                <label class="btn btn-outline-primary translate" for="export_preset_format_json">StableSwarmUI JSON</label>
                                <input type="radio" class="btn-check" name="btnradio" id="export_preset_format_csv" autocomplete="off" onchange="exportPresetsButton()">
                                <label class="btn btn-outline-primary translate" for="export_preset_format_csv">Prompt only CSV</label>
                            </div>
                            <br><br>
                            <textarea id="export_presets_textarea" style="width: 100%;" rows="10" disabled autocomplete="off"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary basic-button translate" onclick="exportPresetsDownload()">Download</button>
                            <button type="button" class="btn btn-secondary basic-button translate" onclick="closeExportPresetViewer()">Close</button>
                        </div>
                    @WebUtil.ModalFooter()
                    @WebUtil.ModalHeader("import_presets_modal", "Import Presets")
                        <div class="modal-body">
                            <div id="import_preset_upload_container">
                                <input type="file" id="import_preset_uploader" oninput="importPresetUpload()" /> &nbsp;<label for="import_preset_uploader" class="translate">Upload Preset File (JSON or CSV)</label>
                                <textarea id="import_presets_textarea" style="width: 100%;" rows="10" oninput="importPresetsCheck()"></textarea>
                            </div>
                            <span class="form-check form-switch display-inline-block">
                                <input type="checkbox" class="form-check-input" id="import_presets_overwrite" onchange="importPresetsCheck()"> <label class="form-check-label translate" for="import_presets_overwrite">Overwrite existing presets</label>
                            </span>
                        </div>
                        <div class="modal-footer">
                            <span id="import_preset_modal_error" class="modal_error_bottom"></span>
                            <button type="button" class="btn btn-primary basic-button translate" id="import_presets_activate_button" onclick="importPresetsActivate()" disabled autocomplete="off">Import</button>
                            <button type="button" class="btn btn-secondary basic-button translate" onclick="closeImportPresetViewer()">Cancel</button>
                        </div>
                    @WebUtil.ModalFooter()
                    @WebUtil.ModalHeader("add_preset_modal", """Create New Preset: <input type="text" id="new_preset_name" placeholder="Preset Name" />""")
                        <div class="modal-body">
                            <textarea class="auto-text auto-text-block translate" id="preset_description" rows="3" placeholder="Preset description text..."></textarea>
                            <span class="form-check form-switch display-inline-block">
                                <input class="form-check-input translate" type="checkbox" id="new_preset_enable_image" title="Enable/disable image" onclick="doToggleEnable('new_preset_image')"> Use Image
                            </span>
                            <div id="new_preset_image" class="new_preset_image"></div>
                            <hr>
                            <h5 class="translate">Parameters in the Preset</h5>
                            <p class="translate">Select the checkbox next to inputs you want included in the preset.<br>By default this will override values entirely. For text inputs, use <code>{value}</code> to include the current UI value instead of overriding.</p>
                            <div id="new_preset_modal_inputs"></div>
                            <div class="advanced_input_checkbox advanced_input_checkbox_presets">
                                <input type="checkbox" id="preset_advanced_options_checkbox" onclick="preset_toggle_advanced()"/>
                                <span class="translate" onclick="preset_toggle_advanced_checkbox_manual()">Display Advanced Options?</span>
                            </div>
                            <div id="new_preset_modal_advanced_inputs" style="display:none;"></div>
                            <div class="advanced_input_checkbox advanced_input_checkbox_presets">
                                <input type="checkbox" id="preset_hidden_options_checkbox" onclick="preset_toggle_hidden()"/>
                                <span class="translate" onclick="preset_toggle_hidden_checkbox_manual()">Display Normally-Hidden Options?</span>
                            </div>
                            <div id="new_preset_modal_hidden_inputs" style="display:none;"></div>
                        </div>
                        <div class="modal-footer">
                            <span id="new_preset_modal_error" class="modal_error_bottom"></span>
                            <button type="button" class="btn btn-primary basic-button translate" onclick="save_new_preset()">Save</button>
                            <button type="button" class="btn btn-secondary basic-button translate" onclick="close_create_new_preset()">Cancel</button>
                        </div>
                    @WebUtil.ModalFooter()
                    <div class="browser_container preset_list_container" id="preset_list"></div>
                    <div class="sui-popover sui_popover_model" id="popover_presetmenu">
                        <div class="sui_popover_model_button translate" onclick="presetMenuEdit()">Edit Preset</div>
                        <div class="sui_popover_model_button translate" onclick="presetMenuDelete()">Delete Preset</div>
                    </div>
                </div>
                <div class="tab-pane genpage-bottom-tab" id="Models-Tab" role="tabpanel">
                    <div class="browser_container" id="model_list"></div>
                </div>
                <div class="tab-pane genpage-bottom-tab" id="Vaes-Tab" role="tabpanel">
                    <div class="browser_container" id="vae_list"></div>
                </div>
                <div class="tab-pane genpage-bottom-tab" id="Loras-Tab" role="tabpanel">
                    <div class="browser_container" id="lora_list"></div>
                </div>
                <div class="tab-pane genpage-bottom-tab" id="Embeddings-Tab" role="tabpanel">
                    <div class="browser_container" id="embedding_list"></div>
                </div>
                <div class="tab-pane genpage-bottom-tab" id="ControlNets-Tab" role="tabpanel">
                    <div class="browser_container" id="controlnet_list"></div>
                </div>
                <div class="tab-pane genpage-bottom-tab" id="Wildcards-Tab" role="tabpanel">
                    <div class="browser_container" id="wildcard_list"></div>
                </div>
                <div class="tab-pane genpage-bottom-tab" id="Tools-Tab" role="tabpanel">
                    <select class="tool-selector" id="tool_selector">
                        <option value="" selected></option>
                    </select>
                    <div class="tool-container" id="tool_container">
                    </div>
                    <div style="height: 10rem"></div> <!-- Spacer -->
                </div>
            </div>
            @WebUtil.ModalHeader("edit_model_modal", """Edit Model Metadata: <input type="text" class="modal_text_extra" id="edit_model_name" placeholder="Model Name" />""")
                <div class="modal-body">
                    <div><span id="edit_model_technical_data"></span></div>
                    <hr>
                    <div>Load from civitai: <input type="text" id="edit_model_civitai_url" class="auto-text translate" placeholder="Civitai URL" autocomplete="off" /> <button type="button" class="btn btn-primary basic-button translate" onclick="edit_model_load_civitai()">Load</button>
                    <div id="edit_model_civitai_info"></div></div>
                    <div>Author: <input type="text" id="edit_model_author" class="modal_text_extra translate" placeholder="Model Author" /></div>
                    <div>Architecture: <select id="edit_model_type" class="modal_text_extra" placeholder="Model Type">
                        @foreach (T2IModelClass arch in T2IModelClassSorter.ModelClasses.Values.OrderBy(x => x.ID))
                        {
                            <option value="@arch.ID" class="translate">@arch.Name</option>
                        }
                    </select></div>
                    <div>Prediction Type: <select id="edit_model_prediction_type" class="modal_text_extra translate" placeholder="Model Type">
                        <option value="">Unspecified</option><option value="v">V-Prediction</option><option value="epsilon">Epsilon</option><option value="x0">x0</option><option value="lcm">LCM</option><option value="v-zsnr">VPred ZSNR</option>
                    </select></div>
                    <div>Standard Resolution: <input type="text" id="edit_model_resolution" class="modal_text_extra translate" placeholder="Resolution, eg 1024x1024" /></div>
                    <div>License: <input type="text" id="edit_model_license" class="modal_text_extra translate" placeholder="Model License" /></div>
                    <div>Date: <input type="text" id="edit_model_date" class="modal_text_extra translate" placeholder="Model Date" /></div>
                    <div>Merged From: <input type="text" id="edit_model_merged_from" class="modal_text_extra translate" placeholder="Model Merged From" /></div>
                    <div>Tags: <input type="text" id="edit_model_tags" class="modal_text_extra translate" placeholder="Model Tags" /></div>
                    <div>Usage Hint: <input type="text" id="edit_model_usage_hint" class="modal_text_extra translate" placeholder="Model Usage Hint" /></div>
                    <div>Trigger Phrase: <input type="text" id="edit_model_trigger_phrase" class="modal_text_extra translate" placeholder="Model Trigger Phrase" /></div>
                    <div id="edit_model_is_negative_div">Is Negative Embedding: <span class="form-check form-switch display-inline-block"><input type="checkbox" id="edit_model_is_negative" class="slider-toggle form-check-input" title="If checked, embedding is for Negative Prompts. Otherwise, for the main prompt." /></span></div>
                    Description: <textarea class="auto-text auto-text-block translate" id="edit_model_description" rows="3" placeholder="Model description text..."></textarea>
                    <span class="form-check form-switch display-inline-block">
                        <input class="form-check-input translate" type="checkbox" id="edit_model_enable_image" title="Enable/disable image" onclick="doToggleEnable('edit_model_image')"> Use Image
                    </span>
                    <div id="edit_model_image" class="new_preset_image"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary basic-button translate" onclick="save_edit_model()">Save</button>
                    <button type="button" class="btn btn-secondary basic-button translate" onclick="close_edit_model()">Cancel</button>
                </div>
            @WebUtil.ModalFooter()
            @WebUtil.ModalHeader("edit_wildcard_modal", """Edit Wildcard: <input type="text" class="modal_text_extra" id="edit_wildcard_name" placeholder="Wildcard Name" />""")
                <div class="modal-body">
                    <p class="translate">Wildcards are lists of random prompt segments. One entry per line. Prompt sub-syntax is allowed (eg you can link another wildcard, or use <code>&lt;random:...&gt;</code>, or <code>&lt;preset:...&gt;</code> or anything else you want).</p>
                    <p class="translate">Prefix a line with <code>#</code> to make it a comment (ie won't be counted as an option).</p>
                    Options: <textarea class="auto-text auto-text-block" id="edit_wildcard_contents" rows="15" placeholder="Wildcard options (1 per line)"></textarea>
                    <span class="form-check form-switch display-inline-block">
                        <input class="form-check-input translate" type="checkbox" id="edit_wildcard_enable_image" title="Enable/disable image" onclick="doToggleEnable('edit_wildcard_image')"> Use Image
                    </span>
                    <div id="edit_wildcard_image" class="new_preset_image"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary basic-button translate" onclick="save_edit_wildcard()">Save</button>
                    <button type="button" class="btn btn-secondary basic-button translate" onclick="close_edit_wildcard()">Cancel</button>
                </div>
            @WebUtil.ModalFooter()
            @WebUtil.ModalHeader("test_wildcard_modal", """Test Wildcard: <span id="test_wildcard_name"></span>""")
                <div class="modal-body">
                    Result: <textarea class="auto-text auto-text-block" id="test_wildcard_result" rows="3" placeholder="Result here..."></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" id="test_wildcard_again_button" class="btn btn-primary basic-button translate" onclick="test_wildcard_again()">Test Again</button>
                    <button type="button" class="btn btn-secondary basic-button translate" onclick="close_test_wildcard()">Cancel</button>
                </div>
            @WebUtil.ModalFooter()
            @WebUtil.ModalHeader("create_tensorrt_modal", """Create TensorRT Engine""")
                <div id="tensorrt_mustinstall" style="display:none;">
                    <div class="modal-body">
                        <p class="translate">TensorRT support is not yet installed. You must install it to continue.</p>
                        <div id="install_trt_button">
                            <button type="button" class="btn btn-primary basic-button translate" onclick="installTensorRT()">Install TensorRT</button>
                        </div>
                    </div>
                </div>
                <div id="tensorrt_modal_ready">
                    <div class="modal-body">
                        <div class="translate hoverable-minor-hint-text">
                            TensorRT is an NVIDIA-specific optimization library. This will create a ".engine" TensorRT model based on your model.
                            <br>This will take several minutes to create, and will only work with a limited subset of inputs.
                            <br>(For example, LoRA will not work, and resolution is constrained to the range you select).
                            <br>Therefore this should only be used for models you want to use frequently, especially for example models exposed as an external API.
                        </div>
                        Model: <select class="auto-dropdown" id="tensorrt_model_select"></select>
                        <br>Preferred Aspect Ratio: <select class="auto-dropdown" id="tensorrt_aspect_ratio">
                            <option selected="">1:1</option>
                            <option>4:3</option><option>3:2</option><option>8:5</option><option>16:9</option><option>21:9</option>
                            <option>3:4</option><option>2:3</option><option>5:8</option><option>9:16</option><option>9:21</option>
                        </select>
                        <br>Aspect Ratio Range Limit: <select class="auto-dropdown" id="tensorrt_aspect_range">
                            <option>Exact</option><option selected="">2x</option><option>4x</option>
                        </select>
                        <br>Preferred Batch Size: <input type="number" class="auto-number" id="tensorrt_batch_size" value="1" min="1" max="64" />
                        <br>Max Batch Size: <input type="number" class="auto-number" id="tensorrt_max_batch_size" value="4" min="1" max="64" />
                        <div id="tensorrt_create_result_box">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="trt_create_button" class="btn btn-primary basic-button translate" onclick="trt_modal_create()">Create</button>
                        <button type="button" class="btn btn-secondary basic-button translate" onclick="close_trt_modal()">Cancel</button>
                    </div>
                </div>
            @WebUtil.ModalFooter()
        </div>
    </div>
    @WebServer.T2ITabBody
    <div class="tab-pane tab-pane-vw" id="utilities_tab" role="tabpanel">
        <ul class="nav nav-tabs" role="tablist" id="utilitiestablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active translate" data-bs-toggle="tab" href="#Utilities-Info-Tab" aria-selected="true" role="tab">Info</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link translate" data-bs-toggle="tab" id="cliptokentabbutton" href="#Utilities-CLIP-Token-Tab" aria-selected="false" tabindex="-1" role="tab">CLIP Tokenization</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link translate" data-bs-toggle="tab" href="#Utilities-Pickle2Safetensor-Tab" aria-selected="false" tabindex="-1" role="tab">Pickle To Safetensors</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link translate" data-bs-toggle="tab" href="#Utilities-LoraExtractor-Tab" id="loraextractortabbutton" aria-selected="false" tabindex="-1" role="tab">LoRA Extractor</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link translate" data-bs-toggle="tab" href="#Utilities-ModelDownloader-Tab" id="modeldownloadertabbutton" aria-selected="false" tabindex="-1" role="tab">Model Downloader</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane show active" id="Utilities-Info-Tab" role="tabpanel">
                <div class="card border-secondary mb-3 card-center-container">
                    <div class="card-header">Utilities</div>
                    <div class="card-body">
                        <p class="card-text translate">
                            The "Utilities" tab provides a variety of general utilities and tools in the subtabs above, and the quicktools below.
                        </p>
                    </div>
                </div>
                <br>
                <div class="card border-secondary mb-3 card-center-container">
                    <div class="card-header translate">Metadata Reset</div>
                    <div class="card-body">
                        <p class="card-text translate">
                            <div class="card-center-container">
                                <button id="util_massmetadataclear_button" class="basic-button translate" onclick="util_massMetadataClear()">Reset All Metadata</button>
                            </div>
                            <br>If you click this button, all Model and Image metadata datastores will be reset, and they will be reloaded from source files.
                            <br>This is useful for example if you've externally modified your model or image files and want to clean out or update Swarm's metadata tracking.
                            <br>Note that this does not remove metadata from the models or images themselves, just from the databases that keep an efficient tracker of them.
                            <br>This may take a moment to run.
                        </p>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="Utilities-CLIP-Token-Tab" role="tabpanel">
                <div class="card border-secondary mb-3 card-center-container">
                    <div class="card-header translate">CLIP Tokenizer</div>
                    <div class="card-body">
                        <p class="card-text translate">
                            This is a tool to analyze CLIP tokenization for Stable Diffusion models.
                            <br>All current Stable Diffusion models use the same CLIP token set, so this applies to them all.
                            <br>Simply type some text in the box below to see how it gets tokenized.
                            <br>It will show each text-piece, and its numerical ID.
                        </p>
                    </div>
                </div>
                <div style="padding: 1rem">
                    <br><textarea class="auto-text clip-tokenization-input-box" id="clip_tokenization_test_textarea" rows="2" oninput="utilClipTokenize()"></textarea>
                    <br>
                    <br><span class="tokenizer-output-area" id="clip_tokenization_result_line"></span>
                </div>
            </div>
            <div class="tab-pane" id="Utilities-Pickle2Safetensor-Tab" role="tabpanel">
                <div class="card border-secondary mb-3 card-center-container">
                    <div class="card-header translate">Pickle To Safetensors</div>
                    <div class="card-body">
                        <p class="card-text translate">
                            This is a tool to quickle convert legacy Pickle (.pt, .ckpt, .bin) files to modern Safetensors files.
                            <br><b>WARNING:</b> Pickle files may contain malicious code. Do not use this tool or otherwise load pickle files unless you trust their source.
                            <br>The pickle files will be moved to a "backups" folder, and the safetensors files left in place where the pickles originally were.
                            <br>You may delete the backups folder after confirming the new safetensors files work as intended.
                            <br>Be aware that this may temporarily use a large amount of filespace.
                            <br>This may take some time to process.
                            <br>(You can continue using the UI as normal while this runs)
                        </p>
                    </div>
                </div>
                <div class="card-center-container">
                    <input type="checkbox" id="pickle2safetensor_fp16" checked> <label for="pickle2safetensor_fp16" class="translate">Convert to FP16?</label> (This will save filespace with minimal side effects, highly recommended)
                </div>
                <div class="card-center-container" id="pickle2safetensor_text_area">
                </div>
                <div class="card-center-container">
                    <table class="spaced_util_table">
                        <tr>
                            <th class="translate">Type</th><th class="translate">Count</th><th class="translate">Convert</th>
                        </tr>
                        <tr><td class="translate">Models</td><td><span id="pickle2safetensor_stable-diffusion_count">?</span></td><td><button id="pickle2safetensor_stable-diffusion_button" class="basic-button translate" onclick="pickle2safetensor_run('Stable-Diffusion')">Convert Models</button></td></tr>
                        <tr><td class="translate">LoRAs</td><td><span id="pickle2safetensor_lora_count">?</span></td><td><button id="pickle2safetensor_lora_button" class="basic-button translate" onclick="pickle2safetensor_run('LoRA')">Convert LoRAs</button></td></tr>
                        <tr><td class="translate">VAEs</td><td><span id="pickle2safetensor_vae_count">?</span></td><td><button id="pickle2safetensor_vae_button" class="basic-button translate" onclick="pickle2safetensor_run('VAE')">Convert VAEs</button></td></tr>
                        <tr><td class="translate">Embeddings</td><td><span id="pickle2safetensor_embedding_count">?</span></td><td><button id="pickle2safetensor_embedding_button" class="basic-button translate" onclick="pickle2safetensor_run('Embedding')">Convert Embeddings</button></td></tr>
                        <tr><td class="translate">ControlNets</td><td><span id="pickle2safetensor_controlnet_count">?</span></td><td><button id="pickle2safetensor_controlnet_button" class="basic-button translate" onclick="pickle2safetensor_run('ControlNet')">Convert ControlNets</button></td></tr>
                    </table>
                </div>
                <br>
            </div>
            <div class="tab-pane" id="Utilities-LoraExtractor-Tab" role="tabpanel">
                <div class="card border-secondary mb-3 card-center-container">
                    <div class="card-header translate">LoRA Extractor</div>
                    <div class="card-body">
                        <p class="card-text translate">
                            This is a tool to extract a LoRA from the difference between two models.
                            <br>"Base" should be whatever the common base model is, eg SDXL-1.0-Base.
                            <br>"Other" should be the unique model with information to extract into the LoRA.
                            <br>The closer Base is to Other, the less complex the LoRA's data will be, and the more likely it will work well with other models that were built off the same base.
                            <br>
                            <br>Note that LoRA Extraction is an imperfect partial process, and will lose some of the data that makes the model unique.
                            <br>Rank is a number indicating how much detail to try to save. Higher numbers result in bigger files, and only slightly more accurate matching. Small values (eg 16) are usually sufficient.
                        </p>
                    </div>
                </div>
                <div class="card-center-container">
                    Base model: <select class="auto-dropdown" id="lora_extractor_base_model"></select>
                    <br>Other model: <select class="auto-dropdown" id="lora_extractor_other_model"></select>
                    <br>Rank: <input type="number" id="lora_extractor_rank" value="16" min="1" max="320" />
                    <br>Save as: <input type="text" id="lora_extractor_name" placeholder="LoRA Name" />
                    <br>
                    <br>
                    <center>
                        <button id="lora_extractor_button" class="basic-button translate" onclick="loraExtractor.run()">Extract LoRA</button>
                    </center>
                    <br>
                    <div class="lora_extractor_special" id="lora_extractor_special_progressbar"><div class="image-preview-progress-overall"></div><div class="image-preview-progress-current"></div></div>
                </div>
                <div class="card-center-container" id="lora_extractor_text_area">
                </div>
            </div>
            <div class="tab-pane" id="Utilities-ModelDownloader-Tab" role="tabpanel">
                <div class="card border-secondary mb-3 card-center-container">
                    <div class="card-header translate">Model Downloader</div>
                    <div class="card-body">
                        <p class="card-text translate">
                            This is a tool to download models for you and save them to Swarm's model folder.
                            <br>Note that only <code>.safetensors</code> models may be downloaded.
                            <br><b>HuggingFace</b> file URLs are supported.
                            <br><b>Civitai</b> URLs are supported and will automatically download+apply model metadata from the civitai API.
                            <br>For anything else, make sure your URL is a direct download URL (not eg an html page with the info about it).
                        </p>
                    </div>
                </div>
                <div class="card-center-container" style="min-width: 30rem">
                    <br>@WebUtil.TextPopoverButton("modeldownloaderurl", "Exact web URL to the model.\nCivitai URLs are fully supported and will load metadata.\nHuggingFace URLs will be recognized.\nFor anything else, make sure the URL is a direct download URL, not a webpage.\nNote only '.safetensors' models are allowed.") <b>URL</b>: <input type="text" id="model_downloader_url" class="auto-text auto-text-wide" placeholder="Model URL" oninput="modelDownloader.urlInput()" autocomplete="off" />
                    <br>
                    <br><div style="text-align: center">@WebUtil.TextPopoverButton("modeldownloaderstatus", "This section will update after you input a URL to inform you if the URL is valid.\nThe box below will display loaded metadata if you use a civitai URL.") <b>Status</b>: <span id="model_downloader_status">(...)</span></div>
                    <div class="model_downloader_metadatazone" id="model_downloader_metadatazone"></div>
                    <br>@WebUtil.TextPopoverButton("modeldownloadertype", "The base model sub-type to use, ie what category it gets saved to.\nMake sure this is correct, you don't want a LoRA in your base models folder or similar.\nCivitai links will autoset this when they load metadata.") <b>Model Type</b>: <select class="auto-dropdown" id="model_downloader_type" autocomplete="off">
                        <option value="Stable-Diffusion">Base Model</option>
                        <option value="LoRA">LoRA</option>
                        <option value="VAE">VAE</option>
                        <option value="Embedding">Embedding</option>
                        <option value="ControlNet">ControlNet</option>
                    </select>
                    <br>
                    <br>@WebUtil.TextPopoverButton("modeldownloadersaveas", "File name to save as. Don't include the '.safetensors' file extension, just the name.\nYou can use a folder path with the '/' symbol.") <b>Save as</b>: <input type="text" id="model_downloader_name" class="auto-text auto-text-wide" placeholder="Model Name" autocomplete="off" oninput="modelDownloader.nameInput()" />
                    <br>
                    <br>
                    <center>
                        <button id="model_downloader_button" class="basic-button translate" onclick="modelDownloader.run()" disabled>Download</button>
                    </center>
                    <br>
                    <div class="lora_extractor_special" id="model_downloader_special_progressbar"><div class="image-preview-progress-overall"></div><div class="image-preview-progress-current"></div></div>
                </div>
                <div class="card-center-container" id="model_downloader_text_area">
                </div>
            </div>
        </div>
        <div style="height: 10rem"></div> <!-- Spacer -->
    </div>
    <div class="tab-pane tab-pane-vw" id="user_tab" role="tabpanel">
        <ul class="nav nav-tabs" role="tablist" id="usertablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active translate" data-bs-toggle="tab" href="#user-info" id="userinfotabbutton" aria-selected="true" role="tab">User Info</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link translate" data-bs-toggle="tab" href="#Settings-User" id="userconfigtabbutton" aria-selected="false" tabindex="-1" role="tab">User Settings</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link translate" data-bs-toggle="tab" href="#Param-Config-User" id="userparamconfigtabbutton" aria-selected="false" tabindex="-1" role="tab">Parameter Configuration</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane show active translate" id="user-info" role="tabpanel">
                (TODO: info n stuff here)
                <br>
                <div class="card border-secondary mb-3 card-center-container">
                    <div class="card-header translate">Stability API Key</div>
                    <div class="card-body">
                        <p class="card-text translate">
                            To use the Stability API in StableSwarmUI, you must set your key.
                            <br>To get your key, <a href="https://platform.stability.ai/account/keys" target="_blank" rel="noreferrer noopener">go here</a>.
                            <br>
                            <br>Once you have your key, enter it below and click save:
                            <br><input type="text" id="stability_api_key" placeholder="Stability API Key" autocomplete="off" oninput="stabilityAPIHelper.onKeyInput()" />
                            <button class="basic-button translate" id="stability_key_submit" onclick="stabilityAPIHelper.onSaveButton()" disabled>Save</button>
                            <button class="basic-button translate" id="stability_key_remove" onclick="stabilityAPIHelper.onRemoveButton()" disabled>Remove</button>
                            <br>Your key: <span id="stability_key_status">(Unknown)</span>
                        </p>
                    </div>
                </div>
                <div class="card border-secondary mb-3 card-center-container">
                    <div class="card-header translate">Civitai API Key</div>
                    <div class="card-body">
                        <p class="card-text translate">
                            If you plan to use the <a href="#" onclick="getRequiredElementById('utilitiestabbutton').click();getRequiredElementById('modeldownloadertabbutton').click();">Model Downloader</a> utility to download content from <a href="https://civitai.com/" target="_blank" rel="noreferrer noopener">Civitai</a>, you might want to set your Civitai API key below.
                            <br>This will allow you to download gated or early-access content that your Civitai account has access to.
                            <br>You can create an API key <a href="https://civitai.com/user/account" target="_blank" rel="noreferrer noopener">here</a>.
                            <br>
                            <br>Once you have your API key, enter it below and click save:
                            <br><input type="text" id="civitai_api_key" placeholder="Civitai API Key" autocomplete="off" oninput="civitaiAPIHelper.onKeyInput()" />
                            <button class="basic-button translate" id="civitai_key_submit" onclick="civitaiAPIHelper.onSaveButton()" disabled>Save</button>
                            <button class="basic-button translate" id="civitai_key_remove" onclick="civitaiAPIHelper.onRemoveButton()" disabled>Remove</button>
                            <br>Your key: <span id="civitai_key_status">(Unknown)</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="Settings-User" role="tabpanel">
                <div class="settings-container">
                    <div class="auto-input" style="overflow: visible">
                        <span class="auto-input-name translate">Language</span>
                        <ul class="nav" style="display:inline-block" role="tablist">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" id="language_dropdown_link" style="color:var(--text)" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Language</a>
                                <div class="dropdown-menu translate-menu notranslate">
                                    @foreach (string code in LanguagesHelper.PreferredLanguages)
                                    {
                                        LanguagesHelper.Language lang = LanguagesHelper.Languages[code];
                                        <a class="dropdown-item" onclick="changeLanguage('@code')" href="#"><span class="translate-block-sm"><img class="translate-img" src="imgs/flags/@(code).jpg" /></span><span class="translate-block-sm2">@code</span> - @lang.Name - @lang.LocalName</a>
                                    }
                                    <div class="dropdown-divider"></div>
                                    @foreach (string code in LanguagesHelper.SortedList.Except(LanguagesHelper.PreferredLanguages))
                                    {
                                        LanguagesHelper.Language lang = LanguagesHelper.Languages[code];
                                        <a class="dropdown-item" onclick="changeLanguage('@code')" href="#"><span class="translate-block-sm"><img class="translate-img" src="imgs/flags/@(code).jpg" /></span><span class="translate-block-sm2">@code</span> - @lang.Name - @lang.LocalName</a>
                                    }
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div id="user_settings_container"></div>
                </div>
                <div class="settings_submit_confirmer" id="usersettings_confirmer">
                    <span class="settings_submit_confirmer_text">Save <span id="usersettings_edit_count">0</span> edited setting(s)?</span>
                    <button type="button" class="btn btn-primary basic-button translate" onclick="save_user_settings()">Save</button>
                    <button type="button" class="btn btn-secondary basic-button translate" onclick="cancel_user_settings_edit()">Cancel</button>
                </div>
            </div>
            <div class="tab-pane" id="Param-Config-User" role="tabpanel">
                <br>
                <h4 class="translate">Notice: this is raw internal configuration of parameters. Don't mess with this unless you know what you're doing.</h4>
                <div id="user_param_config_container" class="settings-container"></div>
                <div class="settings_submit_confirmer" id="user_param_config_confirmer">
                    <span class="settings_submit_confirmer_text">Save <span id="user_param_config_edit_count">0</span> edited parameter setting(s)?</span>
                    <button type="button" class="btn btn-primary basic-button translate" onclick="paramConfig.saveEdits()">Save</button>
                    <button type="button" class="btn btn-secondary basic-button translate" onclick="paramConfig.cancelEdits()">Cancel</button>
                </div>
            </div>
        </div>
        <div style="height: 10rem"></div> <!-- Spacer -->
    </div>
    <div class="tab-pane tab-pane-vw" id="server_tab" role="tabpanel">
        <ul class="nav nav-tabs" role="tablist" id="servertablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active translate" data-bs-toggle="tab" href="#Server-Info" id="serverinfotabbutton" aria-selected="true" role="tab">Server Info</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link translate" data-bs-toggle="tab" href="#Settings-Backends" id="serverbackendstabbutton" aria-selected="false" role="tab">Backends</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link translate" data-bs-toggle="tab" href="#Settings-Server" id="serverconfigtabbutton" aria-selected="false" tabindex="-1" role="tab">Server Configuration</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link translate" data-bs-toggle="tab" href="#Server-Logs" id="logtabbutton" aria-selected="false" tabindex="-1" role="tab">Logs</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane show active" id="Server-Info" role="tabpanel">
                <div class="card border-secondary mb-3 card-center-container">
                    <div class="card-header translate">Server</div>
                    <div class="card-body">
                        <p class="card-text">
                            The "Server" tab provides access to StableSwarmUI's server internals, including:
                            <br>&bullet; The <a href="#Settings-Backends" onclick="getRequiredElementById('serverbackendstabbutton').click()">Backends</a> tab, which allows you to configure and manage backends (the underlying engines that provide the generation core, or remote instances of swarm this instance is connected to)
                            <br>&bullet; The <a href="#Settings-Server" onclick="getRequiredElementById('serverconfigtabbutton').click()">Server Configuration</a> tab, which allows you to configure and manage Swarm's settings (such as models directory, server host port, etc)
                            <br>&bullet; The <a href="#Server-Logs" onclick="getRequiredElementById('logtabbutton').click()">Logs</a> tab, which allows you to view the server logs (eg if you get an error, check Logs -&gt; Debug)
                            <br>
                            <br>This is not to be confused with the <a href="#user_tab" onclick="getRequiredElementById('usersettingstabbutton').click();getRequiredElementById('userconfigtabbutton').click()">User Settings</a> tab, which allows you to configure your user settings (eg save path/format, default VAE choice, etc)
                        </p>
                    </div>
                </div>
                <div class="card-collection-inline">
                    <div class="card border-secondary mb-3 card-center-container">
                        <div class="card-header translate">Local Network</div>
                        <div class="card-body">
                            <p class="card-text">
                                @if (Program.ServerSettings.Network.Host == "127.0.0.1" || Program.ServerSettings.Network.Host == "localhost")
                                {
                                    <p class="translate">This server is only accessible from this computer.</p>
                                }
                                else
                                {
                                    string address = Utilities.GetLocalIPAddress();
                                    if (address is null)
                                    {
                                        <p><span class="translate">Unknown local address, but seems to be open to LAN based on Host setting</span>
                                        <br>'<b>@(Program.ServerSettings.Network.Host)</b>'</p>
                                    }
                                    else
                                    {
                                        <p><span class="translate">This server is likely accessible from LAN on one of the following addresses:</span>
                                        <br>@(address)</p>
                                    }
                                }
                                @if (Program.ProxyHandler is not null && Program.ProxyHandler.PublicURL is not null)
                                {
                                    <p><span class="translate">This server is also accessible from the open internet at:</span>
                                    <br>@(Program.ProxyHandler?.PublicURL)</p>
                                }
                            </p>
                        </div>
                    </div>
                    <div class="card border-secondary mb-3 card-center-container">
                        <div class="card-header translate">Resource Usage</div>
                        <div class="card-body">
                            <p class="card-text" id="resource_usage_area">
                                (Loading...)
                            </p>
                        </div>
                    </div>
                    <div class="card border-secondary mb-3 card-center-container">
                        <div class="card-header translate">Connected Users</div>
                        <div class="card-body">
                            <p class="card-text" id="connected_users_list">
                                (Loading...)
                            </p>
                        </div>
                    </div>
                    @if (Utilities.DotNetVersMissing is not null)
                    {
                        <div class="card border-danger mb-3 card-center-container">
                            <div class="card-header">DotNET @Utilities.DotNetVersMissing Missing</div>
                            <div class="card-body">
                                <p id="dotnet_missing_message" class="card-text">
                                    You do not seem to have DotNET @Utilities.DotNetVersMissing installed - this will be required in a future version of StableSwarmUI.
                                    <br>Please install DotNET SDK @(Utilities.DotNetVersMissing).0 from <a href="https://dotnet.microsoft.com/en-us/download/dotnet/@(Utilities.DotNetVersMissing).0">https://dotnet.microsoft.com/en-us/download/dotnet/@(Utilities.DotNetVersMissing).0</a>
                                </p>
                            </div>
                        </div>
                    }
                </div>
                <div class="card-collection-inline">
                    <div class="card border-danger mb-3 card-center-container">
                        <div class="card-header translate">Shutdown</div>
                        <div class="card-body">
                            <p class="card-text">
                                <span class="translate">If you want to shut down the server, click the button below.</span>
                                <br><button class="basic-button danger-button translate" onclick="shutdown_server()">Shutdown Server</button>
                                <br>
                                <br><span class="translate">Or you can update and restart if there are updates available:</span>
                                <br><button class="basic-button danger-button translate" onclick="update_and_restart_server()">Update and Restart Server</button>
                                <span id="shutdown_notice_area"></span>
                            </p>
                        </div>
                    </div>
                    <div class="card border-secondary mb-3 card-center-container">
                        <div class="card-header translate">Free Memory</div>
                        <div class="card-body">
                            <p class="card-text">
                                <span class="translate">You can free up the VRAM usage, or system memory usage (cache) from backends with the two buttons below.</span>
                                <br>
                                <button class="basic-button danger-button" onclick="server_clear_vram()">Free VRAM</button>
                                <button class="basic-button danger-button" onclick="server_clear_sysram()">Free System RAM</button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="Settings-Backends" role="tabpanel">
                <div class="backend_add_button_container">
                    Add new backend of type:
                    <span class="form-check form-switch display-inline-block">
                        <input class="form-check-input translate" type="checkbox" id="backends_show_advanced" title="Show Advanced Backend Types" onclick="toggleShowAdvancedBackends()" autocomplete="off"> Show Advanced
                    </span>
                    <div id="backend_add_buttons"></div>
                </div>
                <div>
                    <button class="basic-button translate" onclick="restart_all_backends()">Restart All Backends</button>
                </div>
                <div class="backends_list" id="backends_list"></div>
                <div style="height: 10rem"></div> <!-- Spacer -->
            </div>
            <div class="tab-pane" id="Settings-Server" role="tabpanel">
                <div id="server_settings_container" class="settings-container"></div>
                <div class="settings_submit_confirmer" id="serversettings_confirmer">
                    <span class="settings_submit_confirmer_text">Save <span id="serversettings_edit_count">0</span> edited setting(s)?</span>
                    <button type="button" class="btn btn-primary basic-button translate" onclick="save_server_settings()">Save</button>
                    <button type="button" class="btn btn-secondary basic-button translate" onclick="cancel_server_settings_edit()">Cancel</button>
                </div>
        <div style="height: 10rem"></div> <!-- Spacer -->
            </div>
            <div class="tab-pane" id="Server-Logs" role="tabpanel">
                <center>View: <select id="server_log_type_selector"></select> Filter: <input type="text" id="server_log_filter" placeholder="Filter" /></center>
                <div id="server_logs_container" class="server_logs_container"></div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script src="/js/exifr.min.js"></script>
    <script src="/js/genpage/welcomemessages.js?vary=@Utilities.VaryID"></script>
    <script src="/js/genpage/backends.js?vary=@Utilities.VaryID"></script>
    <script src="/js/genpage/browsers.js?vary=@Utilities.VaryID"></script>
    <script src="/js/genpage/presets.js?vary=@Utilities.VaryID"></script>
    <script src="/js/genpage/models.js?vary=@Utilities.VaryID"></script>
    <script src="/js/genpage/params.js?vary=@Utilities.VaryID"></script>
    <script src="/js/genpage/utiltab.js?vary=@Utilities.VaryID"></script>
    <script src="/js/genpage/usertab.js?vary=@Utilities.VaryID"></script>
    <script src="/js/genpage/image_editor.js?vary=@Utilities.VaryID"></script>
    <script src="/js/genpage/generatehandler.js?vary=@Utilities.VaryID"></script>
    <script src="/js/genpage/simpletab.js?vary=@Utilities.VaryID"></script>
    <script src="/js/genpage/main.js?vary=@Utilities.VaryID"></script>
    <script src="/js/genpage/settings_editor.js?vary=@Utilities.VaryID"></script>
    <script src="/js/genpage/logs.js?vary=@Utilities.VaryID"></script>
    <script src="/js/genpage/ui_improvements.js?vary=@Utilities.VaryID"></script>
    @WebServer.PageFooterExtra
}
